<template>
<div>
    <div class="login-container">
         <van-nav-bar
  title="会员登录"
  left-arrow
 @click-left="$router.go(-1)"
/>
          <div class="login-form">
              <h2>手机号登录</h2>
              <p class="tip">未注册的手机号登录后将自动注册</p>
              <div class="form-group">
                  <label for="phone" >请输入手机号码</label>
                  <input v-model="form.phone" type="tel" id="phone" placeholder="请输入手机号码" @keyup.enter="getSmsCaptcha">
              </div>
              <div class="form-group">
                  <label for="captcha" >请输入图形验证码</label>
                  <input type="text" id="captcha" placeholder="请输入图形验证码">
                  <img src="form.captcha" alt="图形验证码" class="captcha-img">
              </div>
              <div class="form-group">
                  <label for="sms-captcha">请输入短信验证码</label>
                  <input v-model="form.smsCaptcha" type="text" id="sms-captcha" placeholder="请输入短信验证码">
                  <button class="get-captcha" @click="startCountdown">
                    {{ countdown === second ? '获取验证码' :countdown + '秒后重新获取' }}
                  </button>
              </div>
              <button class="login-btn" @click="login">登录</button>
          </div>
      </div>
</div>
</template>

<script>
// 导入需要的API模块
import { userAPI } from '@/api'

export default {
  name: 'Login',
  data() {
    return {
      form: {
        phone: '',
        smsCaptcha: ''
      },
      countdown: 5,
      second: 5,
      timer: null
    }
  },
  methods: {
    // 验证手机号
    validatePhone() {
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.form.phone)) {
        this.$toast('请输入正确的手机号')
        return false
      }

      return true
    },

    // 登录方法
    async login() {
      if (!this.validatePhone()) {
        return
      }
      if (!this.validateSmsCaptcha()) {
        return
      }
      try {
        const res = await userAPI.login({
          phone: this.form.phone,
          smsCaptcha: this.form.smsCaptcha
        })

        // 处理登录成功
        this.$toast('登录成功')
        // 存储token
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
        // 跳转到首页
        this.$router.push('/')
      } catch (error) {
        this.$toast('登录失败：' + (error.message || '未知错误'))
      }
    },
    validateSmsCaptcha() {
      const smsCaptchaRegex = /^\d{6}$/
      if (!smsCaptchaRegex.test(this.form.smsCaptcha)) {
        this.$toast('请输入正确的短信验证码')
        return false
      }
      if (!this.form.smsCaptcha) {
        this.$toast('请输入正确的短信验证码')
        return false
      }
      return true
    },
    // 获取短信验证码并开始倒计时
    async startCountdown() {
      if (!this.validatePhone()) {
        return
      }

      if (!this.timer && this.countdown === this.second) {
        try {
          const res = await userAPI.getSmsCaptcha({
            phone: this.form.phone
          })
          this.$toast('验证码发送成功')
          console.log('验证码:', res.data.smsCode)

          // 开始倒计时
          this.timer = setInterval(() => {
            this.countdown--
            if (this.countdown <= 0) {
              clearInterval(this.timer)
              this.timer = null
              this.countdown = this.second
            }
          }, 1000)
        } catch (error) {
          this.$toast('获取验证码失败：' + (error.message || '未知错误'))
        }
      }
    }
  }
}
</script>

<style scoped>
body {
    font-family: "Microsoft Yahei", sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.login-container {
    background-color: #fff;
    width: 350px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.back-arrow {
    text-decoration: none;
    color: #333;
    font-size: 20px;
    margin-right: 10px;
}

.header h1 {
    font-size: 20px;
    font-weight: normal;
}

.login-form h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.tip {
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: #666;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.captcha-img {
    width: 100px;
    height: 30px;
    vertical-align: middle;
    margin-left: 10px;
}

.get-captcha {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    margin-left: 10px;
    color: #666;
}

.login-btn {
    width: 100%;
    padding: 12px;
    background-color: #ff9f00;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

.login-btn:hover {
    background-color: #ff8c00;
}
</style>
